import React, { useEffect, useState } from 'react'
// useSelector 用来帮我们监听redux数据变化,以及帮我们过滤数据
// useDispatch 返回dispatch函数
import { useSelector, useDispatch } from 'react-redux'
import { add, addAsync } from './redux/actions'
export default function Count() {
  const count = useSelector((state) => {
    return state.count
  })

  const dispatch = useDispatch()
  return (
    <div>
      <p>{count}</p>
      <button
        onClick={() => {
          dispatch(add(3))
        }}
      >
        +n
      </button>
      <button
        onClick={() => {
          // setTimeout(() => {
          //   dispatch({ type: 'add', payload: 4 })
          // }, 2000)

          // dispatch((dispatch) => {
          //   //执行异步操作
          //   setTimeout(() => {
          //     dispatch({ type: 'add', payload: 4 })
          //   }, 2000)
          // })
          dispatch(addAsync(4))
        }}
      >
        async +n
      </button>
    </div>
  )
}

/*

function useDispatch(){
    return store.dispatch
}

function useSelector(fn) {
  const [x, setX] = useState(0)
  useEffect(() => {
    store.subscribe(() => {
      //   console.log(store.getState())
      // 只要这个函数执行,意味着redux数据变化, 就需要让Count组件更新
      setX((x) => {
        return x + 1
      })
    })
  }, [])

  return fn(store.getState())
}


*/
